<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/>
    <!--快捷键   meta:vp-->
    <!--meta 属性依次为  viewport 只能被移动端识别   device-width 自适应(作用当前设置宽度)
    user-scalable 是否允许用户缩放-->
    <!--initial-scale 初始缩放比(默认1.0) maximum-scale 最大缩放比
    minimum-scale 最小缩放比   最大和最小缩放比一般用不到，所以删掉-->
    <title></title>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<!--页面内容-->
<div class="jd_layout">
    <!--头部搜索-->

    <header class="jd_header">
        <div class="jd_header_box">
            <a href="#" class="icon_logo"></a>
            <!--在移动端 调用小键盘  可以将enter按钮变为搜索按钮-->
            <form action="#">
                <span class="icon_search"></span>
                <input type="search" placeholder="文字提示"/>
            </form>
            <a href="#" class="login">登录</a>
        </div>
    </header>

    <!--轮播图-->
    <div class="jd_banner">
        <ul class="clearfix">
            <li><a href="#"><img src="images/l8.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l1.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l2.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l3.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l4.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l5.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l6.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l7.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l8.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l1.jpg" alt=""/></a></li>
        </ul>
        <ul>
            <li class="now"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <!--导航栏-->
    <div class="jd_nav">
        <ul class="clearfix">
            <li>
                <a href="#">
                    <img src="images/nav0.png" alt=""/>

                    <p>分类查询</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav1.png" alt=""/>

                    <p>分类查询</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav2.png" alt=""/>

                    <p>分类查询</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav3.png" alt=""/>

                    <p>分类查询</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav4.png" alt=""/>

                    <p>分类查询</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav5.png" alt=""/>

                    <p>分类查询</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav6.png" alt=""/>

                    <p>分类查询</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav7.png" alt=""/>

                    <p>分类查询</p>
                </a>
            </li>
        </ul>
    </div>

    <!--商品主题盒子-->
    <main class="jd_product">
        <section class="jd_product_box">
            <div class="product_title no_border">
                <div class="f_left">
                    <span class="sk_icon"></span>
                    <span class="sk_name">掌上秒杀</span>

                    <div class="sk_time">
                        <span>0</span>
                        <span>0</span>
                        <span>:</span>
                        <span>0</span>
                        <span>0</span>
                        <span>:</span>
                        <span>0</span>
                        <span>0</span>
                    </div>
                </div>
                <div class="f_right">
                    <a href="#" class="m_r10">更多&gt;</a>
                </div>

            </div>
            <div class="product_con">
                <ul class="sk_product clearfix">
                    <li>
                        <a href="#"><img src="images/detail01.jpg" alt=""/></a>

                        <p>&yen;10.00</p>

                        <p>&yen;100.00</p>
                    </li>
                    <li>
                        <a href="#"><img src="images/detail01.jpg" alt=""/></a>

                        <p>&yen;10.00</p>

                        <p>&yen;100.00</p>
                    </li>
                    <li>
                        <a href="#"><img src="images/detail01.jpg" alt=""/></a>

                        <p>&yen;10.00</p>

                        <p>&yen;100.00</p>
                    </li>
                </ul>
            </div>
        </section>
        <section class="jd_product_box">
            <div class="product_title"><h3>京东超市</h3></div>
            <div class="product_con clearfix">
                <a href="#" class="f_left w_50 b_right"><img src="images/cp1.jpg" alt=""/></a>
                <a href="#" class="f_right w_50 b_bottom"><img src="images/cp2.jpg" alt=""/></a>
                <a href="#" class="f_right w_50 "><img src="images/cp3.jpg" alt=""/></a>
            </div>
        </section>
        <section class="jd_product_box">
            <div class="product_title"><h3>京东超市</h3></div>
            <div class="product_con clearfix">
                <a href="#" class="f_right w_50 b_right"><img src="images/cp4.jpg" alt=""/></a>
                <a href="#" class="f_left w_50 b_bottom"><img src="images/cp5.jpg" alt=""/></a>
                <a href="#" class="f_left w_50 "><img src="images/cp6.jpg" alt=""/></a>
            </div>
        </section>
        <section class="jd_product_box">
            <div class="product_title"><h3>京东超市</h3></div>
            <div class="product_con clearfix">
                <a href="#" class="f_left w_50 b_right"><img src="images/cp1.jpg" alt=""/></a>
                <a href="#" class="f_right w_50 b_bottom"><img src="images/cp2.jpg" alt=""/></a>
                <a href="#" class="f_right w_50 "><img src="images/cp3.jpg" alt=""/></a>
            </div>
        </section>
    </main>


</div>


<!--js文件的引用   在头部引用会导致页面加载卡顿-->
<script src="js/common.js"></script>
<script src="js/index.js"></script>
</body>
</html>